<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>尚品汇 结算页</title>
	<link rel="stylesheet" type="text/css" href="/css/all.css" />
	<link rel="stylesheet" type="text/css" href="/css/pages-getOrderInfo.css" />

	<div th:include="common/head :: head"></div>
</head>

<body>
<!--head-->
<!-- 头部栏位 -->
<div th:include="common/header :: header"></div>


<div class="cart py-container" id="item">
	<!--主内容-->
	<div class="checkout py-container">
		<div class="checkout-tit">
			<h4 class="tit-txt">填写并核对订单信息</h4>
		</div>
		<div class="checkout-steps">
			<!--收件人信息-->
			<div class="step-tit">
				<h5>收件人信息<span>&nbsp;</span>
			</div>
			<div class="step-cont">
				<div class="addressInfo">
					<ul class="addr-detail">
						<li class="addr-item">

							<div class="choose-address" v-for="userAddress in userAddressList" :key="userAddress.id">
								<div class="con name" :class="{'selected':userAddress.selected == 1}" @click="selectAddress(userAddress.id)">
									<a href="javascript:;" ><em>{{userAddress.consignee}}</em></a>
								</div>
								<div class="con address" style="width: 70%;">
									<span class="phone">{{userAddress.phoneNum}}</span>
									<span class="place">{{userAddress.userAddress}}</span>
									<span class="base" v-if="userAddress.isDefault == 1">默认地址</span>
								</div>
								<div class="clearfix"></div>
							</div>

						</li>
					</ul>
					<!--确认地址-->
				</div>
			</div>
			<div class="hr"></div>
			<!--支付和送货-->
			<div class="payshipInfo">
				<div class="step-tit">
					<h5>支付方式</h5>
				</div>
				<div class="step-cont">
					<ul class="payType">
						<li class="selected" typeValue="ONLINE">在线支付<span title="点击取消选择"></span></li>
						<li typeValue="OUTLINE">货到付款<span title="点击取消选择"></span></li>
						<input type="hidden" id="payType" value="1">
					</ul>
				</div>
				<div class="hr"></div>
				<div class="step-tit">
					<h5>送货清单</h5>
				</div>
				<div class="step-cont">
					<ul class="send-detail">
						<li>
							<div class="sendType">
								<span>配送方式：</span>
								<ul>
									<li>
										<div class="con express">天天快递</div>
										<div class="con delivery">配送时间：预计8月10日（周三）09:00-15:00送达</div>
									</li>
								</ul>
							</div>
							<div class="sendGoods" th:each="orderDetailVo,it : ${orderDetailVoList}">
								<div class="goods-suit-tit" th:if="${not #strings.isEmpty(orderDetailVo.activityRule) }">
									<strong th:if="${orderDetailVo.activityRule.activityType == 'FULL_REDUCTION'}" th:text="'满'+${orderDetailVo.activityRule.conditionAmount}+'减'+${orderDetailVo.activityRule.benefitAmount}+'元  '">活动商品已购满800.00元，已减80.00元现金    </strong>
									<span th:if="${orderDetailVo.activityRule.activityType == 'FULL_REDUCTION'}" class="ml20" style="display: inline-block;border: 1px solid #7abd54;color: #7abd54;padding: 2px 5px;">&nbsp;返现：<em th:text="'￥' + ${orderDetailVo.activityRule.benefitAmount}+'元'">￥80.00</em></span>

									<strong th:if="${orderDetailVo.activityRule.activityType == 'FULL_DISCOUNT'}" th:text="'满'+${orderDetailVo.activityRule.conditionNum}+'件打'+${orderDetailVo.activityRule.benefitDiscount}+'折  '">活动商品已购满800.00元，已减80.00元现金    </strong>
									<span th:if="${orderDetailVo.activityRule.activityType == 'FULL_DISCOUNT'}" class="ml20" style="display: inline-block;border: 1px solid #7abd54;color: #7abd54;padding: 2px 5px;">&nbsp;返现：<em th:text="'￥' + ${orderDetailVo.activityRule.reduceAmount} +'元'">￥80.00</em></span>
								</div>

								<ul class="yui3-g display"  th:each="detail,it : ${orderDetailVo.orderDetailList}" th:attr="hm-display=|{'displayType':'query','item_type':'sku_id','item':${detail.skuId},'order':${it.index}}|">
									<li class="yui3-u-1-6">
										<span><img th:src="${detail.imgUrl}" width="100"/></span>
									</li>
									<li class="yui3-u-7-12">
										<div class="desc" th:text="${detail.skuName}">{{item.skuName}}</div>
										<div class="seven">7天无理由退货</div>
									</li>
									<li class="yui3-u-1-12">
										<div class="price" th:text="'￥'+${detail.orderPrice}">￥{{item.orderPrice}}</div>
									</li>
									<li class="yui3-u-1-12">
										<div class="num" th:text="'X'+${detail.skuNum}">{{item.skuNum}}</div>
									</li>
									<li class="yui3-u-1-12">
										<div class="exit">有货</div>
									</li>
								</ul>
							</div>
							<div class="buyMessage">
								<span>买家留言：</span>
								<textarea placeholder="建议留言前先与商家沟通确认" class="remarks-cont"></textarea>
							</div>
						</li>
						<li></li>
						<li></li>
					</ul>
				</div>
				<div class="hr"></div>
			</div>

			<div class="linkInfo">
				<div class="step-tit">
					<h5>发票信息</h5>
				</div>
				<div class="step-cont">
					<span>普通发票（电子）</span>
					<span>个人</span>
					<span>明细</span>
				</div>
			</div>
			<div class="cardInfo">
				<div class="step-tit">
					<h5>使用优惠/抵用</h5>
					<div class="coupon-enable">
						<div :class="couponInfo.isChecked == 1 ? 'c-detail item-selected' : 'c-detail'" v-for="couponInfo in couponInfoList" :key="couponInfo.id" @click="selectCoupon(couponInfo.id, couponInfo.isSelect)">
							<div class="c-msg c-dong c-nopointer" :style="couponInfo.isSelect == 1 ? 'background-color: #74d2d4;' : 'background-color: #d1d1d1;'">
								<div class="c-top-dong"></div>
								<div class="c-price">
									<em v-if="couponInfo.couponType == 'CASH'">{{ couponInfo.benefitAmount }}元</em>
									<em v-if="couponInfo.couponType == 'DISCOUNT'">{{ couponInfo.benefitDiscount }}折</em>
									<em v-if="couponInfo.couponType == 'FULL_REDUCTION'">{{ couponInfo.benefitAmount }}元</em>
									<em v-if="couponInfo.couponType == 'FULL_DISCOUNT'">{{ couponInfo.benefitDiscount }}折</em>
								</div>
								<div class="c-limit">
									<span v-if="couponInfo.couponType == 'CASH'"> 现金券</span>
									<span v-if="couponInfo.couponType == 'DISCOUNT'"> 折扣券</span>
									<span v-if="couponInfo.couponType == 'FULL_REDUCTION'"> {{ couponInfo.conditionAmount }}元</span>
									<span v-if="couponInfo.couponType == 'FULL_DISCOUNT'"> {{ couponInfo.conditionNum }}件</span>
								</div>
								<div class="c-time c-time-dong">
									<span>有效期至{{ couponInfo.expireTime }}</span>
								</div>
							</div>
							<div class="c-type c-type-dong">
								<span class="c-type-l">[东券]</span>
								<span class="c-type-r" id="77817365535">[限品类]</span>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
	<div class="order-summary">
		<div class="static fr">
			<div class="list">
				<span><i class="number" th:text="${totalNum}">1</i>件商品，总商品金额</span>
				<em class="allprice" th:text="'￥'+${originalTotalAmount}">¥0</em>
			</div>
			<div class="list">
				<span>运费：</span>
				<em class="transport">￥0.00</em>
			</div>
			<div class="list">
				<span>返现：</span>
				<em class="money" th:text="'￥'+${activityReduceAmount}">0.00</em>
			</div>
			<div class="list">
				<span>优惠券：</span>
				<em class="transport">￥{{ couponAmount }}</em>
			</div>
		</div>
	</div>
	<div class="clearfix trade">
		<div class="fc-price">应付金额:　<span class="price">¥{{ totalPayAmount }}</span></div>
		<div class="fc-receiverInfo">寄送至:
			<span id="receive-address">{{order.deliveryAddress}}</span>
			收货人：<span id="receive-name">{{order.consignee}}</span>
			<span id="receive-phone">{{order.consigneeTel}}</span>
		</div>
	</div>
	<div class="submit">
		<a class="sui-btn btn-danger btn-xlarge" href="javascript:;" @click="submitOrder()">{{ submitLabl }}</a>
	</div>

</div>
<!-- 底部栏位 -->
<!--页面底部-->
<div class="clearfix footer">
	<div class="py-container">
		<div class="footlink">
			<div class="clearfix Mod-list">
				<div class="yui3-g">
					<div class="yui3-u-1-6">
						<h4>购物指南</h4>
						<ul class="unstyled">
							<li>购物流程</li>
							<li>会员介绍</li>
							<li>生活旅行/团购</li>
							<li>常见问题</li>
							<li>购物指南</li>
						</ul>

					</div>
					<div class="yui3-u-1-6">
						<h4>配送方式</h4>
						<ul class="unstyled">
							<li>上门自提</li>
							<li>211限时达</li>
							<li>配送服务查询</li>
							<li>配送费收取标准</li>
							<li>海外配送</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>支付方式</h4>
						<ul class="unstyled">
							<li>货到付款</li>
							<li>在线支付</li>
							<li>分期付款</li>
							<li>邮局汇款</li>
							<li>公司转账</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>售后服务</h4>
						<ul class="unstyled">
							<li>售后政策</li>
							<li>价格保护</li>
							<li>退款说明</li>
							<li>返修/退换货</li>
							<li>取消订单</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>特色服务</h4>
						<ul class="unstyled">
							<li>夺宝岛</li>
							<li>DIY装机</li>
							<li>延保服务</li>
							<li>尚品汇E卡</li>
							<li>尚品汇通信</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>帮助中心</h4>
						<img src="./img/wx_cz.jpg">
					</div>
				</div>
			</div>
			<div class="Mod-copyright">
				<ul class="helpLink">
					<li>关于我们<span class="space"></span></li>
					<li>联系我们<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>商家入驻<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们</li>
				</ul>
				<p>地址：北京市昌平区宏福科技园综合楼6层</p>
				<p>京ICP备19006430号</p>
			</div>
		</div>
	</div>
</div>
<!--页面底部END-->
<!--页面底部END-->
<script src="/js/api/trade.js"></script>
<script src="/js/api/userAddress.js"></script>
<script th:inline="javascript">
	var item = new Vue({
		el: '#item',

		data: {
			submitLabl: '提交订单',

			userAddressList: [[${userAddressList}]],
			tradeNo: [[${tradeNo}]],
			couponInfoList:[[${couponInfoList}]],

			couponAmount: 0.00,
			totalAmount: [[${totalAmount}]],
			totalPayAmount: 0.00,

			order: {
				consignee:'',
				consigneeTel: '',
				deliveryAddress:'',
				paymentWay:'ONLINE',
				orderComment:'',
				orderDetailList:[[${detailArrayList}]],
				orderDetailVoList: [[${orderDetailVoList}]],
				couponInfo: null
			}
		},

		created() {
			this.init()
		},

		methods: {
			init() {
				this.userAddressList.forEach((item) => {
					item.selected = 0
					if(item.isDefault == 1) {
						item.selected = 1
						this.order.consignee = item.consignee
						this.order.consigneeTel = item.phoneNum
						this.order.deliveryAddress = item.userAddress
					}
				})

				//初始化优惠券金额
				this.initCouponAmount()
			},

			submitOrder() {
				//防止重复提交
				if(this.submitLabl == '正在提交...') {
					return;
				}

				//提交选中的优惠券
				this.couponInfoList.forEach(item =>  {
					if(item.isChecked == 1) {
						this.order.couponInfo = item
					}
				})

				if(this.order.consignee == '') {
					this.$message.error('请选择地址')
					return
				}

				this.submitLabl = '正在提交...'
				trade.submitOrder(this.order, this.tradeNo).then(response => {
					debugger
					if (response.data.code == 200) {
						window.location.href = 'http://payment.gmall.com/pay.html?orderId=' + response.data.data
					} else {
						this.$message.error(response.data.message)
						this.submitLabl = '提交订单'
					}
				})
			},

			selectAddress(addressId) {
				this.userAddressList.forEach((item) => {
					if(item.id == addressId) {
						item.selected = 1

						this.order.consignee = item.consignee
						this.order.consigneeTel = item.phoneNum
						this.order.deliveryAddress = item.userAddress
						this.order.paymentWay = this.paymentWay
						this.order.provinceId = item.provinceId
					} else {
						item.selected = 0
					}
				})
			},

			selectPaymentWay(paymentWay) {
				this.order.paymentWay = paymentWay
			},

			initCouponAmount() {
				this.couponAmount = 0;
				if(this.couponInfoList != null) {
					this.couponInfoList.forEach(item =>  {
						if(item.isChecked  == 1) {
							this.couponAmount = this.couponAmount + item.reduceAmount
						}
					})
				}

				this.totalPayAmount = this.totalAmount - this.couponAmount
			},

			selectCoupon(couponId, isSelect) {
				if(isSelect == 0) return

				this.couponInfoList.forEach(item => {
					if(item.id == couponId) {
						if(item.isChecked  == 1) {
							item.isChecked = 0
						} else {
							item.isChecked = 1
						}
					} else {
						item.isChecked = 0
					}
				})
				this.initCouponAmount()
				console.log(this.couponInfoList)
			}
		}
	})
</script>
</body>

</html>
<style>

</style>
